<template>
  <div class="edit-group youke">
    <van-nav-bar
      title="打款截图"
      left-arrow
      fixed
      @click-left="onBack(`/order/orderDetail?id=${$route.query.id}&status=${$route.query.status}&act=${$route.query.act}`)"
    >
      <van-button
        slot="right"
        size="small"
        type="info"
        :disabled="uploadImg==''"
        @click="sendFun"
      >保存</van-button>
    </van-nav-bar>
    <Main>
      <template slot="main">
        <template v-if="$route.query.pay==0||$route.query.pay==1">
          <div
            class="pay-upload"
            v-show="uploadImg==''"
          >
            <van-uploader
              name="uploader"
              :after-read="onRead"
              ref="payupload"
              class="upload-pay"
            >
              <van-icon name="plus" />
            </van-uploader>
            <div class="pay-upload-text">请上传打款截图</div>
          </div>
          <div
            class="upload-img"
            v-show="uploadImg!=''"
            @click="changesfun"
          >
            <img
              :src="uploadImg"
              alt
            >
          </div>
          <van-radio-group  v-model="type" class="radios">
            <van-cell-group>
              <van-cell
                title="微信打款"
                clickable
                @click="radio = '1'"
              >
                <van-radio name="1" />
              </van-cell>
              <van-cell
                title="支付宝打款"
                clickable
                @click="radio = '2'"
              >
                <van-radio name="2" />
              </van-cell>
               <van-cell
                title="银行打款"
                clickable
                @click="radio = '3'"
              >
                <van-radio name="3" />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </template>
        <template v-else>暂无内容</template>
      </template>
    </Main>
    <van-popup v-model="show">
        <van-loading size="50px" type="spinner" text-size="24px" vertical color="#1989fa"></van-loading>
        <div class="texts">上传中...</div>
    </van-popup>
    <!-- <van-popup v-model="show" position="bottom">
      <van-picker
        show-toolbar
        title="卡户银行"
        :columns="columns"
        value-key="value"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>-->
  </div>
</template>

<script type="text/ecmascript-6">
import { trads } from "@/api";
export default {
  //接收父级传递的参数
  props: [],
  //监听数据变化
  watch: {},
  data() {
    return {
      uploadImg: "",
      banknName: "",
      bankaddres: "",
      bankcard: "",
      files: "",
      type: "1",
      columns: [
        {
          id: 1,
          value: "建设银行"
        },
        {
          id: 2,
          value: "邮政储蓄银行"
        },
        {
          id: 3,
          value: "工商银行"
        }
      ],
      show: false
    };
  },
  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {},
  //实时监控data参数数据变化
  computed: {},
  //模板组件
  components: {},
  //执行方法
  methods: {
    sendFun() {
      //  成功过后跳转到
      let data = {
        did: this.$route.query.id,
        type: this.type,
        images: this.uploadImg
      };
      this.show=true
      trads.makePic(data).then(res => {
        if(res.code==1000){
          this.$toast.success(res.reason)
          setTimeout(() => {
            this.$router.go(-1);
             this.show=false
          }, 500);
          
        }else{
          this.show=false
        }
        
      });
    },
    onRead(file, detail) {
      // console.log(file, detail);
      this.files = file.file;
      this.uploadImg = file.content;
    },
    changesfun() {
      this.$refs.payupload.$refs.input.click();
    },
    onConfirm(value, index) {
      // console.log(value, index);
      this.bankaddres = value.value;
      this.show = false;
    },
    onCancel() {
      this.show = false;
    }
  },
  filters: {
    payText(value, t) {
      let name = `微信${t == 0 ? "绑定" : ""}`;
      switch (value) {
        case "0":
          name = `微信${t == 0 ? "绑定" : ""}`;
          break;
        case "1":
          name = `支付宝${t == 0 ? "绑定" : ""}`;
          break;
        case "2":
          name = `银行卡${t == 0 ? "绑定" : ""}`;
          break;

        default:
          name = `微信${t == 0 ? "绑定" : ""}`;
          break;
      }
      return name;
    }
  },
  mounted() {}
  //路由退出时候调用
  //beforeRouteLeave(to, from, next){next()}
};
</script>

<style scoped lang="less">
.edit-group {
  .pay-upload {
    margin-top: 2rem;
    .upload-pay {
      width: 6.25rem;
      height: 6.25rem;
      margin: auto;
      display: block;
      background: #fff;

      .van-icon {
        font-size: 4rem;
        color: #ededed;
        width: 6.25rem;
        &::before {
          display: block;
          text-align: center;
          line-height: 6.25rem;
        }
      }
    }
    .pay-upload-text {
      font-size: 1rem;
      margin-top: 2rem;
      text-align: center;
    }
  }
  .upload-img {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .radios {
    margin: 2rem 0px 0;
  }

}
</style>
